<template>
  <el-row class="rt">
    <el-col :span="2">患者信息</el-col>
    <el-col :span="22">
      <span class="s">姓名:{{patient.realName}}</span>
      <span class="s">病历号:{{patient.caseNumber}}</span>
      <span class="s">年龄:{{patient.age}}</span>
      <span class="s">性别:{{patient.gender}}</span>
    </el-col>
  </el-row>
  <el-row>
    病例首页
  </el-row>

  <el-row>
    <table class="rt">
      <tr>
        <td>主诉</td>
        <td><el-input v-model="medicalList.readme" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>现病史</td>
        <td><el-input v-model="medicalList.present" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>现病治疗情况</td>
        <td><el-input v-model="medicalList.presentTreat" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>既往史</td>
        <td><el-input v-model="medicalList.history" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>过敏史</td>
        <td><el-input v-model="medicalList.allergy" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>体格检查</td>
        <td><el-input v-model="medicalList.physique" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>诊断</td>
        <td>
          <el-table :data="changeList" @selection-change="diseaseCodeList">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="diseaseCode" label="疾病编码"></el-table-column>
            <el-table-column prop="diseaseName" label="疾病名称"></el-table-column>
            <el-table-column prop="diseaseIcd" label="国际ICD编码"></el-table-column>
            <el-table-column prop="diseaseCategory"  label="疾病类型"></el-table-column>
            <el-table-column>
              <template #header>
                <el-button link type="primary">删除</el-button>
                <el-button link type="primary" @click="centerDialogVisible=true">添加</el-button>
              </template>
            </el-table-column>

          </el-table>

        </td>
      </tr>
      <tr>
        <td>检查/检验建议</td>
        <td><el-input v-model="medicalList.proposal" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td>注意事项</td>
        <td><el-input v-model="medicalList.careful" :rows="3" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td colspan="2">
          <el-button @click="changeMedical" type="primary">保存</el-button>
          <el-button type="primary">清空</el-button>
        </td>
      </tr>
    </table>
  </el-row>
  <el-row>
    <el-pagination></el-pagination>
  </el-row>
  <el-dialog v-model="centerDialogVisible" title="添加疾病诊断" width="30%" center>
   <el-row class="dr">
     <el-col  :span="4">疾病名称</el-col>
     <el-col :span="20"><el-input v-model="dname"/></el-col>
   </el-row >
    <el-row class="dr">
      <el-col  :span="5">疾病助记码</el-col>
      <el-col :span="19"><el-input v-model="dc"/></el-col>
    </el-row>
    <el-row class="dr">
      <el-col  :span="4">疾病ICD</el-col>
      <el-col :span="20"><el-input v-model="icd"/></el-col>
    </el-row>
    <el-row class="dr">
      <el-col :span="24" style="text-align: right">
        <el-button @click="DiseaseList">搜索</el-button>
      </el-col>
    </el-row>
     <el-table :data="diseaselist"  @selection-change="handleSelectionChange"
       ref="tableRef"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column property="diseaseName" label="疾病名称"/>
       <el-table-column property="diseaseCode" label="疾病助记码"/>
       <el-table-column property="diseaseIcd" label="疾病icd"/>

     </el-table>
    <el-row>
      <el-row :span="24" >
    <el-pagination style="margin: 0px auto" @current-change="doPaging" :page-size="TotalRowInfo.pageSize" background layout="prev, pager, next" :total="TotalRowInfo.TotalRow" />
      </el-row>
  </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changOk">提交</el-button>
        <el-button type="primary" @click="Deselect">取消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: "homepage",
  data(){
    return{
      medicalList:{},
      centerDialogVisible:false,
      patient:{},
      dname:"",
      dc:"",
      icd:"",
      diseaselist:[],
      changeList:[],
      changeListCopy:[],
      didArr:[],
      TotalRowInfo:{TotalRow:0,pageSize:10,currentPage:1}
    }
  },
  methods:{
    diseaseCodeList(arr){
      this.didArr=[]
      for (let i in arr){
        this.didArr.push(arr[i].id)
        console.log(arr[i].diseaseName)
      }

    },
    changeMedical(){
    this.medicalList.registerId = this.patient.id
      let str=this.$qs.stringify(this.medicalList)
      this.$axios.get("http://localhost:8080/Record/insert?"+str+"&dids="+this.didArr).then((res) => {
        if(res.data){
          ElMessage.success("保存成功")
        }else {
          ElMessage.error("保存失败")
        }


      })
    },
    Deselect(){
       this.$refs.tableRef.clearSelection()

    },
    handleSelectionChange(darr){
           this.changeListCopy=darr


    },
    changOk() {
        this.changeList=JSON.parse(JSON.stringify(this.changeListCopy))
        this.centerDialogVisible = false
    },
    DiseaseList(){

      this.$axios.get("http://localhost:8080/disease/list?ps="+this.TotalRowInfo.pageSize+"&cur=1"+"&dname="+this.dname+"&dc="+this.dc+"&icd="+this.icd).then((res) => {
        console.log(res.data)
        this.diseaselist=res.data
        this.$axios.get("http://localhost:8080/disease/TotalRow").then((res) => {
          this.TotalRowInfo.TotalRow=res.data
        })
      })

    },
    doPaging(cur){
      this.TotalRowInfo.currentPage=cur
      this.$axios.get("http://localhost:8080/disease/list?ps="+this.TotalRowInfo.pageSize+"&cur="+cur+"&dname="+this.dname+"&dc="+this.dc+"&icd="+this.icd).then((res) => {
        console.log(res.data)
        this.diseaselist=res.data
      })
    }
  },created() {
    this.patient= JSON.parse(sessionStorage.getItem("r"))
  console.log(this.patient)
  }
}
</script>

<style scoped>

*{
  text-align: left;
  font-size: 14px;
}
.s{
  background-color:#ECF5FF;
  border: solid 1px #D9ECFF;

  color: #669EFF;
  text-align: center;
}
.el-row:nth-child(1){
  border: none;
  margin:0px;
  padding:0px;
}
.el-row:nth-child(1) span{
  display: inline-block;
  line-height: 30px;
}
.el-row{
  border-top: solid 1px lightgray;
  line-height: 60px;
}

.rt{
  width: 80%;
  text-align: left;
  color: #909399;
}

.rt td:nth-child(odd){
  width: 100px;
  padding-left: 10px;
  background-color: #FAFAFA;
}
.rt td:nth-child(even){
  padding: 10px;
  background-color: white;
}
.dr{
  border:none;
}
</style>